<!DOCTYPE html>

<html>

<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <link href='http://localhost:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css' rel='stylesheet' />
  <script src='http://localhost:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js'></script>

  <script src="./Package/js/vue.js"></script>
  <link rel="stylesheet" href="./Package/element/element.css">
  <script src="./Package/element/element.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    header {
      background-image: url(/Package/images/top.png);
      position: fixed;
      top: 0px;
      left: 0px;
      right: 0px;
      height: 165px;
      z-index: 999;

      display: flex;
      justify-content: center;
    }

    header>span {
      font-size: 44px;
      color: #ffffff;
      margin-top: 5px;
      font-weight: 600;
    }

    header>img {
      margin: 10px 20px 0 0;
    }

    .Panel {
      width: 300px;
      /* height: 100px; */
      background: #fff;
      border-radius: 6px;

      position: fixed;
      top: 50%;
      right: 40px;
      transform: translateY(-50%);

      padding: 20px;
    }

    #container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .el-button {
      width: 100%;
    }
  </style>
  <title>map</title>
</head>

<body>
  <div id='container'></div>
  <div class="Panel" id="app">
    <el-form ref="form" :model="form" label-width="40px">
      <el-form-item style="text-align: center; font-size: 24px;">
        <span style="font-size: 24px; margin-left: -34px;">登陆系统</span>
      </el-form-item>
      <el-form-item label="账户">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input show-password v-model="form.region"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">立即登陆</el-button>
      </el-form-item>
    </el-form>
  </div>

  <script>
    bmgl.Config.HTTP_URL = 'http://192.168.1.107:9000';
    var viewer = new bmgl.Viewer('container', { mapId: 'bigemap.0j52021f', requestRenderMode: false });

    // 旋转
    var a = viewer.clock.currentTime.secondsOfDay;
    rotateEventListener = function (e) {
      var i = viewer.clock.currentTime.secondsOfDay;
      var t = ((i - a) / 1e3) * 0.4;
      a = i;
      viewer.scene.camera.rotate(bmgl.Cartesian3.UNIT_Z, 1 * t)
    };
    viewer.clock.multiplier = 1500;
    viewer.clock.shouldAnimate = true;

    viewer.clock.onTick.addEventListener(rotateEventListener);

    //取消默认的点击事件
    viewer.screenSpaceEventHandler.removeInputAction(bmgl.ScreenSpaceEventType.LEFT_CLICK);
    //禁止默认的地形遮挡
    viewer.scene.globe.depthTestAgainstTerrain = false;


    let vm = new Vue({
      el: '#app',
      data: {
        form: {
          name: 'admin',
          region: '123456'
        }
      },
      methods: {

        login() {
          setTimeout(() => {
            this.$notify({
              title: '成功',
              message: '登录系统成功',
              type: 'success',
              offset: 80
            });

            // 保存数据到 localStorage
            localStorage.setItem('key', 'value');

            if (rotateEventListener) {
              viewer.clock.onTick.removeEventListener(rotateEventListener);
              rotateEventListener = null;

              viewer.scene.camera.flyTo({
                destination: bmgl.Cartesian3.fromDegrees(113.672968, 34.758353, 500000), // 经度，维度，深度
                complete: function () {
                  location.href = './src/map.html'
                }
              })
            }
          }, 1000);
        }
      }
    })
  </script>
</body>

</html>